<ol class="breadcrumb newcrumb">
    <li>
        <a href="#">
            <span><i class="fa fontello-home-outline"></i>
            </span>Home</a>
    </li>
    <li><a href="#">Form</a>
    </li>
    <li class="active">Advance Element</li>
</ol>

<div class="row">
    <div class="col-md-12">

        <div class="box">
            <div class="box-header">
                <h3 class="box-title">Input masks</h3>
            </div>
            <div class="box-body">
                <!-- Date dd/mm/yyyy -->
                <div class="form-group">
                    <label>Date masks:</label>
                    <div class="input-group">
                        <div class="input-group-addon">
                            <i class="fa fontello-calendar-1"></i>
                        </div>
                        <input type="text" class="form-control" data-inputmask="'alias': 'dd/mm/yyyy'" data-mask/>
                    </div>
                    <!-- /.input group -->
                </div>
                <!-- /.form group -->

                <!-- Date mm/dd/yyyy -->
                <div class="form-group">
                    <div class="input-group">
                        <div class="input-group-addon">
                            <i class="fa fontello-calendar-1"></i>
                        </div>
                        <input type="text" class="form-control" data-inputmask="'alias': 'mm/dd/yyyy'" data-mask/>
                    </div>
                    <!-- /.input group -->
                </div>
                <!-- /.form group -->

                <!-- phone mask -->
                <div class="form-group">
                    <label>US phone mask:</label>
                    <div class="input-group">
                        <div class="input-group-addon">
                            <i class="fa fontello-phone-outline"></i>
                        </div>
                        <input type="text" class="form-control" data-inputmask='"mask": "(999) 999-9999"' data-mask/>
                    </div>
                    <!-- /.input group -->
                </div>
                <!-- /.form group -->

                <!-- phone mask -->
                <div class="form-group">
                    <label>Intl US phone mask:</label>
                    <div class="input-group">
                        <div class="input-group-addon">
                            <i class="fa fontello-phone-outline"></i>
                        </div>
                        <input type="text" class="form-control" data-inputmask="'mask': ['999-999-9999 [x99999]', '+099 99 99 9999[9]-9999']" data-mask/>
                    </div>
                    <!-- /.input group -->
                </div>
                <!-- /.form group -->

                <!-- IP mask -->
                <div class="form-group">
                    <label>IP mask:</label>
                    <div class="input-group">
                        <div class="input-group-addon">
                            <i class="fa fontello-desktop"></i>
                        </div>
                        <input type="text" class="form-control" data-inputmask="'alias': 'ip'" data-mask/>
                    </div>
                    <!-- /.input group -->
                </div>
                <!-- /.form group -->

            </div>
            <!-- /.box-body -->
        </div>
        <!-- /.box -->

        <div class="box ">
            <div class="box-header">
                <h3 class="box-title">Color & Time Picker</h3>
            </div>
            <div class="box-body">
                <!-- Color Picker -->
                <div class="form-group">
                    <label>Color picker:</label>
                    <input type="text" class="form-control my-colorpicker1" />
                </div>
                <!-- /.form group -->

                <!-- Color Picker -->
                <div class="form-group">
                    <label>Color picker with addon:</label>
                    <div class="input-group my-colorpicker2">
                        <input type="text" class="form-control" />
                        <div class="input-group-addon">
                            <i></i>
                        </div>
                    </div>
                    <!-- /.input group -->
                </div>
                <!-- /.form group -->

                <!-- time Picker -->
                <div class="bootstrap-timepicker">
                    <div class="form-group">
                        <label>Time picker:</label>
                        <div class="input-group">
                            <input type="text" class="form-control timepicker" />
                            <div class="input-group-addon">
                                <i class="fa fontello-clock-1"></i>
                            </div>
                        </div>
                        <!-- /.input group -->
                    </div>
                    <!-- /.form group -->
                </div>
            </div>
            <!-- /.box-body -->
        </div>
        <!-- /.box -->

    </div>
    <!-- /.col (left) -->
    <div class="col-md-12">
        <div class="box ">
            <div class="box-header">
                <h3 class="box-title">Date picker</h3>
            </div>
            <div class="box-body">
                <!-- Date range -->
                <div class="form-group">
                    <label>Date range:</label>
                    <div class="input-group">
                        <div class="input-group-addon">
                            <i class="fontello-calendar"></i>
                        </div>
                        <input type="text" class="form-control pull-right" id="reservation" />
                    </div>
                    <!-- /.input group -->
                </div>
                <!-- /.form group -->

                <!-- Date and time range -->
                <div class="form-group">
                    <label>Date and time range:</label>
                    <div class="input-group">
                        <div class="input-group-addon">
                            <i class="fa fontello-clock-1"></i>
                        </div>
                        <input type="text" class="form-control pull-right" id="reservationtime" />
                    </div>
                    <!-- /.input group -->
                </div>
                <!-- /.form group -->

                <!-- Date and time range -->
                <div class="form-group">
                    <label>Date range button:</label>
                    <div class="input-group">
                        <button class="btn btn-default pull-right" id="daterange-btn">
                            <i class="fontello-calendar"></i> Date range picker
                            <i class="fa fa-caret-down"></i>
                        </button>
                    </div>
                </div>
                <!-- /.form group -->

            </div>
            <!-- /.box-body -->
        </div>
        <!-- /.box -->

        <!-- iCheck -->
        <div class="box ">
            <div class="box-header">
                <h3 class="box-title">iCheck - Checkbox & Radio Inputs</h3>
            </div>
            <div class="box-body">
                <!-- Minimal style -->

                <!-- checkbox -->
                <div class="form-group">
                    <label>
                        <input type="checkbox" class="minimal" checked/>
                    </label>
                    <label>
                        <input type="checkbox" class="minimal" />
                    </label>
                    <label>
                        <input type="checkbox" class="minimal" disabled/>Minimal skin checkbox
                    </label>
                </div>

                <!-- radio -->
                <div class="form-group">
                    <label>
                        <input type="radio" name="r1" class="minimal" checked/>
                    </label>
                    <label>
                        <input type="radio" name="r1" class="minimal" />
                    </label>
                    <label>
                        <input type="radio" name="r1" class="minimal" disabled/>Minimal skin radio
                    </label>
                </div>

                <!-- Minimal red style -->

                <!-- checkbox -->
                <div class="form-group">
                    <label>
                        <input type="checkbox" class="minimal-red" checked/>
                    </label>
                    <label>
                        <input type="checkbox" class="minimal-red" />
                    </label>
                    <label>
                        <input type="checkbox" class="minimal-red" disabled/>Minimal red skin checkbox
                    </label>
                </div>

                <!-- radio -->
                <div class="form-group">
                    <label>
                        <input type="radio" name="r2" class="minimal-red" checked/>
                    </label>
                    <label>
                        <input type="radio" name="r2" class="minimal-red" />
                    </label>
                    <label>
                        <input type="radio" name="r2" class="minimal-red" disabled/>Minimal red skin radio
                    </label>
                </div>

                <!-- Minimal red style -->

                <!-- checkbox -->
                <div class="form-group">
                    <label>
                        <input type="checkbox" class="flat-red" checked/>
                    </label>
                    <label>
                        <input type="checkbox" class="flat-red" />
                    </label>
                    <label>
                        <input type="checkbox" class="flat-red" disabled/>Flat red skin checkbox
                    </label>
                </div>

                <!-- radio -->
                <div class="form-group">
                    <label>
                        <input type="radio" name="r3" class="flat-red" checked/>
                    </label>
                    <label>
                        <input type="radio" name="r3" class="flat-red" />
                    </label>
                    <label>
                        <input type="radio" name="r3" class="flat-red" disabled/>Flat red skin radio
                    </label>
                </div>
            </div>
            <!-- /.box-body -->
            <div class="box-footer">
                Many more skins available.
            </div>
        </div>
        <!-- /.box -->
    </div>
    <!-- /.col (right) -->
</div>
<!-- /.row -->



<script>
//Datemask dd/mm/yyyy
$("#datemask").inputmask("dd/mm/yyyy", {
    "placeholder": "dd/mm/yyyy"
});
//Datemask2 mm/dd/yyyy
$("#datemask2").inputmask("mm/dd/yyyy", {
    "placeholder": "mm/dd/yyyy"
});
//Money Euro
$("[data-mask]").inputmask();
//Date range picker
$('#reservation').daterangepicker();
//Date range picker with time picker
$('#reservationtime').daterangepicker({
    timePicker: true,
    timePickerIncrement: 30,
    format: 'MM/DD/YYYY h:mm A'
});
//Date range as a button
$('#daterange-btn').daterangepicker({
        ranges: {
            'Today': [moment(), moment()],
            'Yesterday': [moment().subtract('days', 1), moment().subtract('days', 1)],
            'Last 7 Days': [moment().subtract('days', 6), moment()],
            'Last 30 Days': [moment().subtract('days', 29), moment()],
            'This Month': [moment().startOf('month'), moment().endOf('month')],
            'Last Month': [moment().subtract('month', 1).startOf('month'), moment().subtract('month', 1).endOf('month')]
        },
        startDate: moment().subtract('days', 29),
        endDate: moment()
    },
    function(start, end) {
        $('#reportrange span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));
    }
);

//iCheck for checkbox and radio inputs
$('input[type="checkbox"].minimal, input[type="radio"].minimal').iCheck({
    checkboxClass: 'icheckbox_minimal',
    radioClass: 'iradio_minimal'
});
//Red color scheme for iCheck
$('input[type="checkbox"].minimal-red, input[type="radio"].minimal-red').iCheck({
    checkboxClass: 'icheckbox_minimal-red',
    radioClass: 'iradio_minimal-red'
});
//Flat red color scheme for iCheck
$('input[type="checkbox"].flat-red, input[type="radio"].flat-red').iCheck({
    checkboxClass: 'icheckbox_flat-red',
    radioClass: 'iradio_flat-red'
});

//Colorpicker
$(".my-colorpicker1").colorpicker();
//color picker with addon
$(".my-colorpicker2").colorpicker();

//Timepicker
$(".timepicker").timepicker({
    showInputs: false
});
</script>
